<template>
	<view class="content" :style="'padding-top:'+contentTop">

		<!-- 收藏列表 -->
		<scroll-view scroll-y="true" enable-flex class="video-list" @scrolltolower="end">
			<view class="no_order" v-if="list.length==0">
				<view class="no-img"><image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/noorder.png"></image></view>
				<view class="no-message">暂无收藏，赶快收藏去吧</view>
			</view>
			<view class="video-item" v-for="(item,index) in list" @click="show(item,index)">
				<view class="video-img">
					<image  :src="item.coverUrl"></image>
				</view>
				<view class="video-title">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<!-- 视频播放 -->
		<view class="pay-video-list" :style="is_show?'bottom:0%;':'bottom:-100%'">
			<video-list @commentHide="$emit('commentHide')" @commentShow="$emit('commentShow')" :collecton="{list:list,FormData:FormData,index:collectionIndex}" :active="2" :method="'post'" :api="'collect/collectionList'" v-on:pgetMessageList="getMessageList" :video_list_type="2" v-if="is_show && videoListShow"></video-list>
		</view>
	</view>
</template>

<script>
	export default {
		name:"collection",
		data() {
			return {
				contentTop: uni.getStorageSync('menuInfo').contentTop, //胶囊高度
				contentTopcount: uni.getStorageSync('menuInfo').contentTopcount, //胶囊相关
				FormData:{
					page:1
				},
				list:[],
				is_show:false,
				collectionIndex:0,
        videoListShow:true
			};
		},
		created() {
			this.get_video_list()
      this.videoListShow=true
		},
    beforeDestroy()
    {
      this.videoListShow=false
    },
		methods:{
			async get_video_list()
			{
				var data=this.FormData
				const res = await this.$NoteApi.doRequest("post",'collect/collectionList',data,'json')
				if(res.data.code==0){
					var list=this.list;
					list=list.concat(res.data.data);
					this.list=list
					console.log(list)
				}
			},
			show(item,index){
				this.is_show=true
				this.collectionIndex=index
			},
			end(){
				this.FormData.page++;
				this.get_video_list()
			},
			getMessageList(e,index){
				this.$emit("pgetMessageList",e,index);
			}
		}
	}
</script>

<style>
	.content{
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 100upx;
	}
	.video-list{
		width: 100%;
		/* mix-height: 100%; */
		/* max-height: 100%; */
		/* height: 100%; */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: column;
		overflow: auto;
		box-sizing: border-box;
		padding: 10upx 0;
		background-color: #fff;
		align-content:flex-start;
		flex-direction:row;
/* 		column-count: 0;//想要排成的列数
		column-gap: 0; */
	}
	.video-item{
		width: 370upx;
		height: 495upx;
		background-color: #9E9E9E;
		margin-bottom: 10upx;
		position: relative;
	}
	.video-img{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.video-img image{
		width: 100%;
		height: 100%;
	}
	.video-title{
		position: absolute;
		left: 20upx;
		bottom: 20upx;
		color: #fff;
	}
	.pay-video-list{
		position: fixed;
		bottom: -100;
		left: 0;
		transition: all .5s linear;
	}
	.no_order{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.no-img{
		width: 340upx;
		height: 340upx;
	}
	.no-img image{
		width: 100%;
		height: 100%;
	}
	.no-message{
		font-size: 40upx;
		color: #97A1AF;
	}

</style>
